{% extends "base_form.html" %}

{% macro score_optional_template(score_id, score_text, seq) -%}
<div class="form-group">
    <input type="hidden" name="type" value="0">
    <label class="col-sm-2 control-label">选择曲子:</label>
    <div class="col-sm-4">
    <select class="form-control select2-remote"  name="score"
             data-ajax--url="{{ url('score_enjoy:score_enjoy_office_choices') }}">
        {% if score_id %}

        <option value="{{ score_id }}" selected="selected">{{ score_text }}</option>

        {% endif %}
    </select></div>
    <span>顺序:</span><input name='seq' type="number" min='0' value="{{ seq }}">
    <button type="button" class="btn btn-primary btn-score-delete">删除</button>
</div>
{%- endmacro %}
{% block form_body %}


<form class="form-horizontal" role="form" method="POST">
    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">

                    {% set messages = get_messages(request) %}
                    {% if messages %}
                    <div class="alert {%if messages.type==messages.INFO%}alert-success{%else%}alert-danger{%endif%} alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        {{ messages|join('|') }}
                    </div>
                    {% endif %}
                    <br>
                    <br>
                    <br>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><a id='btn-add-score' href="#">＋添加曲子</a> </label>
                    </div>
                    <div class="form-group" id="add-new-score">
                        {%for seg in scores%}
                        {{ score_optional_template(seg.score_id, seg.score_text, seg.seq) }}
                        {% endfor %}
                    </div>
                     <div class="row">
                        <div class="col-lg-2 col-lg-offset-4">
                            <button type="submit" class="btn btn-primary ">保存</button>

                        </div>
                        <div class="col-lg-2 col-lg-offset-0">

                            <a class="btn btn-primary" href="/score_enjoy/score_enjoy_manage_list/"> 取消</a>
                        </div>
                     </div>


                </div>
            </div>
        </div>
    </div>
</form>


{% endblock form_body %}
{% block body_js%}


<script type="text/javascript" src="http://cdn.staticfile.org/Plupload/2.1.1/plupload.full.min.js"></script>
<script type="text/javascript" src="{{ static('lib/js/qiniu.min.js') }}"></script>
<script type="text/javascript" src="{{ static('lib/js/jquery.md5.js') }}"></script>
<script type="text/javascript" src="{{ static('lib/js/select2.min.js') }}"></script>
<script src="{{ static('js/hera-select2.js') }}"></script>
<script type="text/html" class="score-html">
    {{ score_optional_template ('','', 0)}}
</script>
<script type="text/javascript">
    function delete_score_init() {
        $(".btn-score-delete").on("click", function () {
            $(this).parent().remove();

        });
    }
    active_valid('score');
    active_valid('seq');
    delete_score_init();
    $('#btn-add-score').click(function () {
        console.log('start---');
        $('#add-new-score').append($('.score-html').html());
        select2_init();
        active_valid('score');
        active_valid('seq');
        delete_score_init();
    });
</script>
{% endblock%}
